<template>
	<div>
		<section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
			<div class="container"><a class="navbar-brand" href="index.html"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{$t('m.name')}}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="/">{{$t('m.home')}} <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.shop')}}</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">Women's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Men's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Girl's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">Boy's</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.pages')}}</a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">Homepage</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">Catalog</a>
								<a class="dropdown-item" href="item.html">Item Detail</a>
								<a class="dropdown-item" href="cart.html">Cart</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">Contact</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.contact')}}</a></li>
					<li class="nav-item dropdown">
						<!-- 检索功能 -->
						<!-- <Search @search="search" v-model="text"></Search> -->
						<div v-width="200">
                		<AutoComplete :option="param" v-model="value" @change="onChange" type="title" endInput="enter" :must-match="false"></AutoComplete>
           				</div>
					</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="/cart" target="_blank" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">{{ totalcount }}</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>{{ totalcount }} 件商品 <span class="emphasis">共计 ${{ totalprice }}</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items" v-for="(item,index) in cartlist" :key="index">
									<li class="row">
										<div class="col-3">
											<img :src="item.img" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">{{item.name}}</a></h6>
											<span class="text-muted">{{item.num}}x</span>
											<span class="emphasis">${{item.price/100}}</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
			</div>
			<div v-if="username">
				{{$t('m.title')}}<a href="/myprofile">{{ username }}</a>
				<a href="/login" @click="quit">{{$t('m.state')}}</a>
			</div>
			<div v-if="!username">
				<a href="/register">{{$t('m.reg')}}</a>
				<a href="/login">{{$t('m.login')}}</a>
			</div>
			<!-- 国际化语言开关 -->
			<h-switch v-model="lang" @change="lang_change">中/英</h-switch>
			<a href="/addgoods">添加商品</a>
		</nav>
	</section>
	</div>
</template>


<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
import jsonp from 'fetch-jsonp';

const loadData = function (filter, callback) {
  // this 为 option 配置
  // this.orgId 使用传递的参数获取数据，例：搜索某公司下的员工
  jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${filter}`)
    .then(response => response.json())
    .then((d) => {
      callback(d.result.map((r) => {
        return r[0];
      }));
    });
};

export default {

  data () {
    return {
	  msg: "这是一个变量",
	  username:'',
	  cartlist:[],
	  totalprice:0,
	  totalcount:0,
	  //语言变量
	  lang:true,
	//   //检索关键字
	//   text:'',
	  //智能提示控件
        value: '',
        param: {
        orgId: 1, // 自定义参数传递
        loadData,
		minWord: 1,
	  } 	
    }
  },
  //定义接收参数
  //接收参数
//   props:['totalcount','totalprice'],
  mounted:function(){
	
	if(localStorage.getItem("cart")){
			//将localstorage的数据赋给cartlist
			this.cartlist = JSON.parse(localStorage.getItem("cart"));
			//计算价格
			for(let i=0,l=this.cartlist.length;i<l;i++){

				this.totalprice += (this.cartlist[i].num * this.cartlist[i].price/100);
			}
			//计算购物车总数
			for(let i=0,l=this.cartlist.length;i<l;i++){

				this.totalcount += this.cartlist[i].num;
			}
		}else{
			this.cartlist = []
		}
	
	//接收参数
	var sina_id = this.$route.query.sina_id;
	if (sina_id){
		//自动登录
		localStorage.setItem('username',sina_id);
		localStorage.setItem('uid',this.$route.query.uid)
	}

	//接收参数
	var ding_id = this.$route.query.ding_id;
	if (ding_id){
		//自动登录
		localStorage.setItem('username',ding_id);
		localStorage.setItem('uid',this.$route.query.uid)
	}
	//判断用户是否登录
	var uname =localStorage.getItem("username")
	if (uname==''){
		this.username = ''
	}else{
		this.username = uname
	}
	// 自动判断语言
	console.log(navigator.language);
	if(navigator.language=='zh-CN'){
		this.$i18n.locale='zh'
	}else{
		this.$i18n.locale='en'
	}
	//   //判断语言选择
	//   this.$i18n.locale = localStorage.getItem("lang")
	//   if(this.$i18n.locale=="cn"){
	// 	  this.lang = 0
	//   }else{
	// 	  this.lang = 1
	//   }
	
  
},
  methods:{
	//关键词并更
  	onChange(data, trigger) {
		console.log(data.title);
		//传参   传递关键字
		this.$router.push('/search?word='+data.title)
    },
	// //检索逻辑
	// search(){
	// 	//传参   传递关键字
	// 	this.$router.push('/search?word='+this.text)
		
	// },
	//切换语言
	lang_change(){
		console.log(this.lang)
		//判断语言
		if (this.lang==true){
			//英文
			this.$i18n.locale="en"
			localStorage.setItem("lang","en")
		}else{
			this.$i18n.locale="zh"
			localStorage.setItem("lang","zh")
			
		}
	},

	
	//退出登录
	quit(){
		//删除localstorage
		localStorage.removeItem('username')
		//全量删除  localstorage.clear()
	 } 
  }   
  }

	


</script>


<style>
	


</style>